<template>
    <view class='audio-card'>
        <view class='audio'>
            <view class='play-icon'>
                <image
                    v-if='data.status === "pause"'
                    mode='scaleToFill'
                    src='@/static/images/icon/audio-play.png'
                    style='width: 50rpx;height: 50rpx;'
                    @click='onPlayAudio' />
                <image
                    v-if='data.status === "play"'
                    mode='scaleToFill'
                    src='@/static/images/icon/audio-pause.png'
                    style='width: 50rpx;height: 50rpx;'
                    @click='onPauseAudio' />
            </view>
            <view class='audio-main'>
                <slider
                    max='100'
                    block-size='12'
                    className='progress'
                    :block-color='sliderColor'
                    :activeColor='activeColor'
                    :backgroundColor='backgroundColor'
                    :value='data.progress'
                    @change='handleChange'
                    @changing='dragProgress' />
                <view class='time'>
                    <view>{{ dateFormart(data.currentTime) }}</view>
                    <view>{{ dateFormart(data.duration) }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad, onReady } from "@dcloudio/uni-app"
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'

import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const emits = defineEmits(['update:modelValue', 'play', 'changeProgress', 'pause', 'dragProgress'])
let props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object,
        default: () => {
            return {
                "url": "",
                "duration": 0,
                "key": 0,
                "status": 'default',
                "progress" : 0,
                "currentTime" : 0
            }
        }
    },
    index: {
        type: Number
    }
})
let innerAudioContext = ''

const sliderColor = ref('#009EFF');
const activeColor = ref('#009EFF');
const backgroundColor = ref('#EFEFEF');

const currentTime = ref(0);
const progress = ref(0);

watch(
    () => props.data,
    (newVal, oldValue) => {
        // console.log(newVal);
    },
    { immediate: true}
)

// 处理时间格式(总时长装换时分秒)
const dateFormart = (value) => {
    value = Number(value).toFixed(0)
    let hour = Math.floor(value / 3600)
    let minute = Math.floor((value - hour * 3600) / 60)
    let second = value - hour * 3600 - minute * 60
    hour = hour < 10 ? `0${hour}` : hour
    minute = minute < 10 ? `0${minute}` : minute
    second = second < 10 ? `0${Math.floor(second)}` : Math.floor(second)
    return `${minute}:${second}`
}

const handleChange = (event) => {
    console.log(event);
    const progress = event.detail.value
    emits('changeProgress', props.index, progress);
}

// 拖动进度条
const dragProgress = (event) => {
    emits('dragProgress');
}

function onPlayAudio(audioSrc) {
    emits('play', props.index);
}


function onPauseAudio() {
    emits('pause', props.index);
}

onMounted(() => {
    console.log('onMounted')

})

onUnmounted(() => {
    console.log('onUnmounted')
    // innerAudioContext.pause()
    // innerAudioContext.destroy();
})


</script>


<style lang='scss' scoped>
.audio-card {
    height: 100 rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    display: flex;
    flex-direction: column;
    padding: 20 rpx 24 rpx;

    .title {
        color: #333333;
        font-size: 26 rpx;
        font-weight: 500;
    }

    .audio {
        margin-top: 15 rpx;
        display: flex;

        .play-icon {
            width: 50 rpx;
            height: 50 rpx;
            padding-right: 20 rpx;
        }

        .audio-main {
            height: 48 rpx;
            flex: 1;
            margin-left: 15 rpx;
            padding-top: 10 rpx;
        }

        .progress {
            margin: 0;
        }

        .time {
            width: 100%;
            height: 50 rpx;
            font-size: 24 rpx;
            font-weight: 400;
            color: #666666;
            margin-top: -15rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>